<template>
	<view>
		<view class="hospital_detail">
			<view class="detail_left">
				<image src="/static/4812.png" mode="aspectFit"></image>
				<text>+关注</text>
			</view>
			<view class="detail_right">
				<view class="hospita_name">武汉博士医院</view>
				<view class="hotHospital_title">
					<view class="jianjie">
						<view class="yyjj">
							<text>医院简介：</text>
							武汉汉西博士中医医院武汉汉西博士中医医院...
						</view>
						<view class="chakan"  @click="open">查看</view>
						<uni-popup ref="popup" :mask-click="false">
							<view style="background-color: #fff; padding: 20px;">武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院武汉汉西博士中医医院</view>
							<button @click="close">关闭</button>
						</uni-popup>
					</view>
					<view class="keshi">
						<view class="yyjj">
							<text>医院科室：</text>风湿免疫科，中医科中医科中医科中医科...
							<view class="chakan"   @click="open1">查看</view>
						<uni-popup ref="popup1" :mask-click="false">
							<view style="background-color: #fff; padding: 20px;">3435345345</view>
							<button @click="close1">关闭</button>
						</uni-popup>
						</view>
					</view>
					<view class="keshi">
						<view class="yyjj">
							<text>门诊：</text>8：30 - 5：00
							<view class="chakan"   @click="open2">分享</view>
						</view>
						<uni-popup ref="popup2" :mask-click="false">
							<view style="background-color: #fff; padding: 20px;">12312312313</view>
							<button @click="close2">关闭</button>
						</uni-popup>
					</view>
					<view class="keshi">
						<view class="yyjj">
							武汉市硚口区汉西路85号1-3楼
							<view class="chakan"   @click="open3">到这里</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	    <view class="koubei">
	    	<view class="hospital_kb">
	    		医院口碑
	    	</view>
			<view class="kb_one">
				<text style="color: red;">588</text>
				<text>已预约</text>
			</view>
			<view class="kb_one">
				<text style="color: red;">588</text>
				<text>评价数</text>
			</view>
			<view class="kb_one">
				<text style="color: red;">588</text>
				<text>粉丝数</text>
			</view>
	    </view>
	    <view class="tab_gh_list">
	    	<text :class="curLi == 1?'curLi':''" @click="zixun(1)">咨询/挂号</text>
			<text :class="curLi == 2?'curLi':''" @click="zixun(2)">医生列表</text>
	    </view>
	    <view class="tab_one" v-if="curLi == 1">
	    	<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					*姓名：
				</view>
				<view class="uni-list-cell-db">
					<input class="uni-input" maxlength="10" placeholder="请输入就诊人姓名" />
				</view>
			</view>
	    	<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					*手机号：
				</view>
				<view class="uni-list-cell-db">
					<input class="uni-input" maxlength="10" placeholder="请输入手机号" />
				</view>
			</view>
	    	<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					*科室：
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>
	    	<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					*预约类型：
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChangeType" :value="index_type" :range="array_type">
						<view class="uni-input">{{array_type[index_type]}}</view>
					</picker>
				</view>
			</view>
	    	<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					*预约时间：
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
			</view>
	    	<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					*预约时段：
				</view>
				<view class="uni-list-cell-db">
					<!-- curS -->
					<text :class="timeDuan=='上午'?'shiduan curS':'shiduan'" @click="setTimeduan('上午')">上午</text>
					<text :class="timeDuan=='下午'?'shiduan curS':'shiduan'" @click="setTimeduan('下午')">下午</text>
				</view>
			</view>
	    	<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					*院区分布：
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChangeAddress" :value="index_add" :range="array_add">
						<view class="uni-input">{{array_add[index_add]}}</view>
					</picker>
				</view>
			</view>
	    	<view class="uni-list-cell" style="display: flex;flex-direction: column;">
				<view class="uni-list-cell-left" style="margin-bottom: 10px;">
					*补充备注：
				</view>
				<view class="uni-list-cell-db">
					<textarea  placeholder="请输入补充内容" style="height: 100px;"/>
				</view>
				<text style="font-size: 12px; margin-top: 10px;">温警提示:挂号要到流由医统收取，本平台不收取任何要用</text>
			</view>
			<button type="primary">直接提交</button>
	    </view>
	    <view class="tab_one" v-if="curLi == 2">
	    	<view class="doctorList_body">
	    			<view class="doctorList_item">
	    				<view class="d_headbox">
	    					<image src="/static/5909.png" mode="aspectFit"></image>
	    					<view class="d_headbox_title_box">
	    						<view class="d_headbox_title">
	    							<view>冯秉权</view>
	    							<view class="keshis">男科</view>
	    						</view>
	    						<text>武汉阿波罗医院</text>
	    					</view>
	    				</view>
	    				<text class="shanchangs">擅长：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
	    				<view class="pingpins">
	    					<view class="pingluns">好评率：<text>87</text> 预约量：<text>420</text> 粉丝量：<text>484</text></view>
	    					<view class="butts" @click="goyuyue">去预约</view>
	    				</view>
	    			</view>
	    			<view class="doctorList_item">
	    				<view class="d_headbox">
	    					<image src="/static/5909.png" mode="aspectFit"></image>
	    					<view class="d_headbox_title_box">
	    						<view class="d_headbox_title">
	    							<view>冯秉权</view>
	    							<view class="keshis">男科</view>
	    						</view>
	    						<text>武汉阿波罗医院</text>
	    					</view>
	    				</view>
	    				<text class="shanchangs">擅长：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
	    				<view class="pingpins">
	    					<view class="pingluns">好评率：<text>87</text> 预约量：<text>420</text> 粉丝量：<text>484</text></view>
	    					<view class="butts" @click="goyuyue">去预约</view>
	    				</view>
	    			</view>
	    			<view class="doctorList_item">
	    				<view class="d_headbox">
	    					<image src="/static/5909.png" mode="aspectFit"></image>
	    					<view class="d_headbox_title_box">
	    						<view class="d_headbox_title">
	    							<view>冯秉权</view>
	    							<view class="keshis">男科</view>
	    						</view>
	    						<text>武汉阿波罗医院</text>
	    					</view>
	    				</view>
	    				<text class="shanchangs">擅长：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
	    				<view class="pingpins">
	    					<view class="pingluns">好评率：<text>87</text> 预约量：<text>420</text> 粉丝量：<text>484</text></view>
	    					<view class="butts" @click="goyuyue">去预约</view>
	    				</view>
	    			</view>
	    			<view class="doctorList_item">
	    				<view class="d_headbox">
	    					<image src="/static/5909.png" mode="aspectFit"></image>
	    					<view class="d_headbox_title_box">
	    						<view class="d_headbox_title">
	    							<view>冯秉权</view>
	    							<view class="keshis">男科</view>
	    						</view>
	    						<text>武汉阿波罗医院</text>
	    					</view>
	    				</view>
	    				<text class="shanchangs">擅长：男性不育，性功能障碍泌尿生殖系统疾病的治疗。</text>
	    				<view class="pingpins">
	    					<view class="pingluns">好评率：<text>87</text> 预约量：<text>420</text> 粉丝量：<text>484</text></view>
	    					<view class="butts" @click="goyuyue">去预约</view>
	    				</view>
	    			</view>
	    	
	    		</view>
	    	
	    </view>
	
	     <view class="hotHospital">
	     	<view class="hotHospital_title" style="display: flex;justify-content: space-between; align-items: center;padding: 10px;">
	     		<text style="color: #333; font-size:16px; font-weight: bold;">热门新闻</text>
	     		<navigator url="/pages/index/test">
	     			<button style="font-size: 14px;">查看更多</button>
	     		</navigator>
	     	</view>
	     	<view class="keshi_hostpital_list">
	     		<navigator url="/pages/index/test">
	     			<view class="duizhen_doctor1">
	     				<image src="/static/3358.png" mode="aspectFit"></image>
	     				<view class="desc">
	     					<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
	     					<view class="desc_title">
	     						<view>大同天佑医院</view>
	     						<view class="buts_desc">首都医科大学附属北京朝</view>
	     					</view>
	     				</view>
	     			</view>
	     		</navigator>
	     
	     		<navigator url="/pages/index/test">
	     			<view class="duizhen_doctor1">
	     				<image src="/static/3358.png" mode="aspectFit"></image>
	     				<view class="desc">
	     						<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
	     					<view class="desc_title">
	     						<view>大同天佑医院</view>
	     						<view class="buts_desc">首都医科大学附属北京朝</view>
	     					</view>
	     				</view>
	     			</view>
	     		</navigator>
	     		<navigator url="/pages/index/test">
	     			<view class="duizhen_doctor1">
	     				<image src="/static/3358.png" mode="aspectFit"></image>
	     				<view class="desc">
	     						<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
	     					<view class="desc_title">
	     						<view>大同天佑医院</view>
	     						<view class="buts_desc">首都医科大学附属北京朝</view>
	     					</view>
	     				</view>
	     			</view>
	     		</navigator>
	     		<navigator url="/pages/index/test">
	     			<view class="duizhen_doctor1">
	     				<image src="/static/3358.png" mode="aspectFit"></image>
	     				<view class="desc">
	     						<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
	     					<view class="desc_title">
	     						<view>大同天佑医院</view>
	     						<view class="buts_desc">首都医科大学附属北京朝</view>
	     					</view>
	     				</view>
	     			</view>
	     		</navigator>
	     	</view>
	     </view>
	     
	
	</view>
</template>

<script>
	export default {
		data(){
			const currentDate = this.getDate({
				format: true
			})
			return{
				curLi:1,
				index: 0,
				index_type: 0,
				date: currentDate,
				timeDuan:'',
				index_add:0,
				array: ['痛风', '肠胃科', '肛肠科', '肿瘤科'],
				array_type:['初诊挂号','复诊挂号','电话咨询','微信咨询','疾病咨询','诊后咨询'],
				array_add:['武昌区','汉阳区','汉口区','江夏区']
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
			goyuyue:function(){
				uni.navigateTo({
					url: '/pages/searchDoctor/doctor_detail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			bindPickerChangeAddress:function(e){
				this.index_add = e.detail.value;
			},
			setTimeduan:function(obj){
				this.timeDuan = obj;
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value;
			},
			bindPickerChangeType: function(e) {
				this.index_type = e.detail.value;
			},
			bindDateChange: function(e) {
				this.date = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			zixun(obj){
				this.curLi = obj;
			},
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
			},
			open1() {
				this.$refs.popup1.open('center')
			},
			close1() {
				this.$refs.popup1.close()
			},
			open2() {
				this.$refs.popup2.open('center')
			},
			close2() {
				this.$refs.popup2.close()
			}
		}
	}
</script>

<style>
	.hospital_detail{ display: flex; padding: 10px; border-bottom: 1px solid #eee; padding-bottom:10px;}
	.detail_left{ flex:0 0 20%; display: flex; flex-direction: column;justify-content: center; align-items: center;}
	.detail_left text{background-color: #eee; border-radius:2px; font-size: 12px; padding:3px; margin-top: 13px;}
	.detail_left image{width: 100px; height:100px; object-fit: cover;}
	.detail_right{ flex:1;}
	.detail_right .hospita_name{ font-size: 16px;}
	.hotHospital_title,.hotHospital_title text{ font-size: 12px;}
	.hotHospital_title .jianjie,.hotHospital_title .keshi{ margin: 14px 0; position: relative;}
	.hotHospital_title .chakan{position: absolute;right: 0;top: 0; background-color:#fff; color: #07BD63; padding: 0px 15px;}
	.hotHospital_title .yyjj{white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display: flex;}
	.hotHospital_title text{flex:0 0 100px; color: #07BD63; font-size: 16px;}
	.koubei{display: flex; justify-content: space-evenly; align-items: center; font-size: 14px; padding: 15px 0;}
	.kb_one{display: flex; flex-direction: column; justify-content: center;align-items: center;}
	.tab_gh_list{display: flex; justify-content: space-evenly; margin: 10px 0;}
	.tab_gh_list text{ flex: none; width:50%; text-align: center; padding: 10px 0; font-size: 14px;}
	.curLi{background-color: #07BD63; color:#fff;}
	.uni-list-cell{display: flex; border-bottom: 1px solid #eee; padding: 10px 0;}
	.uni-list-cell-left{ margin-right: 20px; width: 80px;}
	.tab_one{padding: 10px; font-size: 14px;}
	.tab_one input::placeholder{ font-size: 14px;}
	.shiduan{padding:5px 10px; border: 1px solid #999; margin-right: 5px; border-radius: 2px;}
	.curS{ background-color: #07BD63; color: #fff;}
	
	.doctorList_body {
		width: 94%;
		margin-left: 3%;
	}
	
	.doctorList_item {
		display: flex;
		flex-direction: column;
		margin-bottom: 30px;
	}
	
	.d_headbox {
		display: flex;
	}
	
	.d_headbox image {
		width: 50px;
		height: 50px;
	}
	
	.d_headbox_title_box {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}
	
	.d_headbox_title_box text {
		font-size: 12px;
		margin-top: 5px;
	}
	
	.d_headbox_title {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.shanchangs {
		font-size: 14px;
		margin: 5px 0;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.pingpins {
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		margin-top: 8px;
	}
	
	.pingpins text {
		color: red;
	}
	
	.butts {
		background-color: #07BF64;
		color: #fff;
		padding: 3px;
		border-radius: 3px;
	}
	
	.doctorList_body {
		margin-top: 15px;
	}
	
	
	/*新闻*/
	.duizhen_doctor1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.duizhen_doctor1 image {
		width: 140px;
		height: 85px;
		object-fit: cover;
		margin-right: 10px;
		text-align: left;
	}
	
	.duizhen_doctor1 a {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.duizhen_doctor1 .desc_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		margin-top: 5px;
	}
	
	.duizhen_doctor1 .buts_desc {
		margin-left: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 60%;
	}
	
	.duizhen_doctor1 .buts {
		font-size: 14px;
		background-color: #64BF07;
		width: fit-content;
		padding: 3px;
		border-radius: 3px;
		color: #fff;
	}
	
	.duizhen_doctor1 .names {
		font-weight: bold;
		font-size: 14px;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
	.duizhen_doctor1 .desc {
		margin-right: auto;
	}
	
</style>